<template>
	<view class="">
		<view class="box" v-for="(item, index) in list" :key="index">
			<!-- 信息 -->
			<view class="infotext flex align-center justify-between">
				<view class="left align-center">
					<!-- 头像 -->
					<!-- <view class="touxiang"@click="onJump('/pagesCircle/Userdetails/Userdetails?id=' + item.user_id)"> -->
					<view class="touxiang" @click="heardeuser(item)">
						<u-avatar :src="item.avatar"></u-avatar>
					</view>
					<view class="infofont">
						<view class="left">
							<view class="name u-line-1" style="margin-left: 20rpx;"> <text>{{ item.nickname }}</text></view>
							<view class="biaoqian" v-if="item.label" style="background: #f4CE98;">
								<text>{{ item.label }}</text>
							</view>
						</view>
		
					</view>
		
				</view>
				<view class="guanzhu" v-if="item.is_follow == 0">
					<view class="btn" @click="follow(item)" style="background: #dd275d;">
						<text style="font-size: 32rpx;"> +关注</text>
					</view>
				</view>
		
			</view>
			<view >
								
				<view class="detailed" style="position: relative;" v-if="item.plate_top_array.indexOf('2')!=-1">
					<u-read-more text-indent="0" close-text="展开" :toggle="true" show-height="336rpx" :shadow-style="{backgroundImage:'none'}">
						<span style="position: absolute;">
							<image src="../../../static/circle/zhiding.png" mode=""
								style="display: inline-block;width: 104rpx; height: 44rpx;"></image>
						</span>
						<span @click="onJump('/pagesCircle/circledetail/circledetail?id=' + item.id)" class='' style="white-space: pre-wrap;text-indent:114rpx;line-height: 48rpx;">{{ item.content }}</span>
					</u-read-more>
				</view>
				<view class="detailed" v-else>
					<u-read-more :toggle="true" close-text="展开" text-indent="0em" show-height="336rpx" :shadow-style="{backgroundImage:'none'}">
						<span @click="onJump('/pagesCircle/circledetail/circledetail?id=' + item.id)" class='' style="white-space: pre-wrap;line-height: 48rpx;">{{ item.content }}</span>
					</u-read-more>
				</view>
				
			</view>
		
			<view v-if="item.files && item.files.length == 1 && item.files[0].file_class == 1" class="ClassBlbum"
				style="padding: 20rpx;border-radius: 15rpx;">
				<view class="u-page">
					<image :id="'img'+index" :src="item.filesList[0]" @tap="ViewImage($event,0)"
						:data-images="item.fealList" :data-url="item.filesList[0]" :data-index="0"
						:mode="item.mode_text" @load="imageLoad($event,index)" :style="item.containerHeight">
					</image>
				</view>
			</view>
			<view v-else>
				<view style="padding: 20rpx;border-radius: 15rpx;" v-if="item.files && item.files.length">
					<div>
						<view class="u-page" v-if="item.files && item.files[0].file_class == 1">
							<view class="grid col-3 grid-square flex-sub margin-top">
								<view class="bg-img bg-gray" v-for="(itemImg,indexImg) in item.filesList"
									:key="indexImg" :data-images="item.fealList" :data-url="itemImg"
									:data-index="indexImg">
									<image :src="itemImg" mode="aspectFill" @tap="ViewImage($event,indexImg)"
										:data-images="item.fealList" :data-index="indexImg"></image>
								</view>
							</view>
						</view>
		
						<view v-else class="margin-top">
		
							<!-- <video v-show="item.show" @loadedmetadata="tuiVideometa($event,index,'list')"
								:style="{'width':item.width+'px','height':item.height+'px'}"
								:src="item.filesList" :show-center-play-btn="true" controls="false"
								:show-play-btn="false" :show-fullscreen-btn="false" :id="'myVideo'+ index"
								@fullscreenchange="tuiVideoScreenChange($event,'myVideo'+index,'list')"
								direction='0' @click="tuiVideoshow('myVideo'+index,'list')"></video> -->
								
								<view class="" style="position: relative;">
									<image
									v-show="item.show"
									 style="border-radius: 0rpx;" :fade="true" duration="350" mode="aspectFill"
									 @load="tuiVideometa($event,index,'list')"
									  lazy-load="true"
									 :style="{'width':item.width+'px','height':item.height+'px'}"
									  @click="videoLook(item.files[0].url)"
									 :src="item.files[0].url + videoEnd">
									</image>
									<view  @click="videoLook(item.files[0].url)"  v-show="item.show"  :style="{'left':item.width/2+'px'}" style="position: absolute; top:50%;transform:translate(-50%,-50%);z-index: 10;">
											<text class="cuIcon-videofill" style="font-size: 50px;color: #fff;"></text>
									</view>	
								</view>
						</view>
		
					</div>
				</view>
			</view>
			<view class="circleTime fontSize30 align-center" style="line-height: 102%;">
				<!-- 小时 -->
				<view class="circleTime-left" style="line-height: 102%;">
					<text style="padding-right: 10rpx;">{{ item.create_time }}</text>
					<!-- <text style="padding-left: 20rpx;">浏览 {{ item.look_num }}</text> -->
				</view>
				<view class="circleTime-right">
					<!-- 点赞 -->
					<view class="flex align-center" @click="handleHelp(item)">
						<u-icon name="thumb-up" :color="item.is_like == 1 ? '#E1265D' : '#b0b0b0'" size="22">
						</u-icon>
						<!-- <text style="padding: 0rpx 0 0 2rpx;">{{ item.is_like == 1 ? item.like_num : '点赞' }}</text> -->
						<text style="padding: 0rpx 0 0 2rpx;" v-if="item.like_num == 0">点赞</text>
						<text style="padding: 0rpx 0 0 2rpx;" v-else>{{ item.like_num  }}</text>
					</view>
					<!-- 评论 -->
					<view class="flex align-center padding-left-sm" @click="headeltopdetil(item)"
						style="line-height: 102%;">
						<u-icon name="chat" color="#b0b0b0" size="22"></u-icon>
						<text>{{ item.comment_num == 0 ? '评论' :
							item.comment_num }}</text>
					</view>
					<!-- 分享 -->
				<!-- 	<view class="flex align-center padding-left-sm" @click.native="handleShowShare(item)"
						style="line-height: 102%;">
						<u-icon name="share" color="#b0b0b0" size="22"></u-icon>
						<text>分享</text>
					</view> -->
		
				</view>
		
			</view>
		</view>
		
		<!-- 成员动态分享海报 -->
		<my-poster :showShore="showShare" :detail="memberDetail" @close="closePoster"></my-poster>
	</view>
</template>

<script>
	import myPoster from '@/components/pagesCircle/my-poster/index.vue';
	import minxinvideo from '@/pagesCircle/libs/mixins/video.js';
	import circle from '@/pagesCircle/libs/mixins/circle.js'
	export default {
		mixins: [circle, minxinvideo], // 使用mixin
		props: {
			list:{
				type:Array,
				default(){
					return [];
				},
			}
		},
		components: {
			myPoster,
		},
		data(){
			return {
				switchIndex: 1,
				memberDetail:"",
				showShare:false,
			}
		},
		methods:{
			//分享关闭
			closePoster(e){
				this.showShare = false
				if(e.type && e.type=="you"){
					//分享好友
					let title = this.memberDetail.content
					 uni.$u.mpShare = {
						 title: title,
						 path: '/pagesCircle/circledetail/circledetail?id=' + this.memberDetail.id
					 }
					 
				}
			},
			heardeuser(item) {
				if (!this.userInfo.token) {
					this.judgeLogin(() => {});
					return false;
				} else {
					wx.vibrateShort();
					uni.navigateTo({
						url: `/pagesCircle/Userdetails/Userdetails?id=${item.user_id}`
					})
				}
			},
			//  关注
			async follow(item) {
				wx.vibrateShort();
				let params = {
					uid: item.user_id,
				}
				await this.$circleApi.follow(params).then(res => {
					if (item.is_follow == 0) {
						uni.$u.toast('关注成功')
						this.list.forEach((item_z, index_z) => {
							if (item_z.user_id == params.uid) {
								item_z.is_follow = 1
								this.$set(this.list, 'is_follow', 1)
							}
						})
					} else {
						uni.$u.toast('取消关注')
						this.list.forEach((item_z, index_z) => {
							if (item_z.user_id == params.uid) {
								item_z.is_follow = 0
								this.$set(this.list, 'is_follow', 0)
							}
						})
					}
				})
			
			},
			// 图片加载
			imageLoad: function(e, index) {
				console.log("图片加载")
				console.log(index)
				var _this = this;
				if (e.detail.height > e.detail.width) {
					this.list[index].containerHeight = 'height:250px !important';
					this.list[index].mode_text = 'heightFix';
					this.$set(this.list, 'containerHeight', true);
					this.$set(this.list, 'mode_text', true);
				} else {
					this.list[index].containerHeight = 'width: 200px !important';
					this.list[index].mode_text = 'widthFix';
					this.$set(this.list, 'containerHeight', true);
					this.$set(this.list, 'mode_text', true);
				}
			},
			//打开预览e
			ViewImage(e) {
				let urlList = []
				console.log(e.currentTarget.dataset.index)
				if (e.currentTarget.dataset.images) {
					urlList = e.currentTarget.dataset.images
				}
				uni.previewImage({
					urls: urlList,
					current: e.currentTarget.dataset.index
				});
			},
			async handleShowShare(item) {
				console.log(item)
				let params = {
					dynamic_id: item.id
				}
				let res = await this.$circleApi.dynamicShare(params);
				item.dynamic_code_url = res.dynamic_code_url
				this.showShare = true
				this.memberDetail = item
			
			},
			
			headeltopdetil(item) {
				if (!this.userInfo.token) {
					this.judgeLogin(() => {});
					return false;
				} else {
					wx.vibrateShort();
					uni.navigateTo({
						url: `/pagesCircle/circledetail/circledetail?id=${item.id}`
					})
				}
			},
			
			// 点赞
			async handleHelp(item) {
				wx.vibrateShort();
				this.list.map(i => {
					if (i.id == item.id) {
						item.is_like == 0 ? item.like_num += 1 : item.like_num -= 1
						i.is_like == 0 ? item.is_like = 1 : item.is_like = 0
					}
				})
				let params = {
					dynamic_id: item.id,
				}
				await this.$circleApi.help(params).then(res => {
					if (item.is_like == 0) {
						uni.$u.toast('取消点赞')
					} else {
						uni.$u.toast('点赞成功')
					}
				})
			},
			
			// 视频
			// tuiVideometa(e,index,dataObj) {
			// 	let item;
			// 	if(Number(index) > -1){
			// 		 //数组的某一项
			// 		 item = this[dataObj][index]
					
			// 	}else{
			// 		//单个对象
			// 		 item = {}
			// 	}
			// 	// item.width =  e.detail.width;
			// 	// item.height =  e.detail.height;
			// 	// console.log("mingming",e);
			// 	var that = this;
			// 	//获取系统信息
			// 	uni.getSystemInfo({
			// 	  success (res) {
			// 		 let videoHeight = that.videoHeight
			// 		//视频的高
			// 		var height = e.detail.height;
			// 		//视频的宽
			// 		var width = e.detail.width;
			// 		//算出视频的比例
			// 		var proportion =  width / height;
			// 		 var heightproportion =  height / width;
			// 		//res.windowWidth为手机屏幕的宽。
			// 		var windowWidth = res.windowWidth;
			// 		//算出当前宽度下高度的数值
			// 		//item.height = proportion * windowWidth;
			// 		let videowidth = proportion * videoHeight
			// 		if(videowidth > windowWidth){
			// 			//如果大于手机屏幕的宽度
			// 			videowidth = windowWidth * 0.7;
			// 			//计算视频的高
			// 			videoHeight = heightproportion * videowidth;
			// 		}
			// 		item.width = videowidth
			// 		item.height = videoHeight
			// 		item.show = true;
					
			// 		if(Number(index) > -1){
			// 			//数组的某一项
			// 			that.$set(that[dataObj],index,item);
			// 		}else{
			// 			that[dataObj] = item
			// 		}
			// 	  }
			// 	})
			// },
			// tuiVideoshow(myVideo,dataObj) {
			// 	let item = this[dataObj]
			// 	let videoContext = uni.createVideoContext(myVideo, this);
			// 	if(!item.openScreen){
			// 		videoContext.requestFullScreen();
			// 	}else{
			// 		videoContext.exitFullScreen();
			// 	}
			// },
			// tuiVideoScreenChange(e, myVideo,dataObj) {
			// 	let videoContext = uni.createVideoContext(myVideo, this);
			// 	let item = this[dataObj]
			// 	let fullScreen = e.detail.fullScreen; //值true为进入全屏，false为退出全屏 
			// 	if (!fullScreen) { //退出全屏 
			// 		videoContext.pause();
			// 		item.openScreen = false
			// 	}else{
			// 		videoContext.play();
			// 		item.openScreen = true;
			// 	}
			// 	this[dataObj] = item
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #ffffff;
		padding-top: 40rpx 0;
		border: 2rpx solid #f6f6f6;
		padding: 20rpx 0;
	
		.box-top {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx 20rpx 30rpx;
	
			.box-top-left {
				background-color: #DD275D;
				padding: 8rpx 30rpx;
				border-radius: 30rpx;
				color: #fff;
			}
		}
	}
	
	.infotext {
		margin: 15rpx 30rpx;
	
		.left {
			display: flex;
			width: 70%;
	
			.touxiang {
				width: 12%;
				// margin: 20rpx;
			}
	
			.infofont {
				width: 88%;
				display: flex;
				flex-direction: column;
	
				.left {
					padding: 0 10rpx;
					margin-left: 20rpx;
	
					.name {
						font-size: 35rpx;
						font-weight: bold;
						padding-right: 20rpx;
					}
	
					.biaoqian {
						margin-top: 8rpx;
						padding: 0 12rpx;
						border-radius: 30rpx;
	
						font-size: 25rpx;
						color: #7c5900;
						overflow: hidden;
						/* 第二步：让文本不会换行， 在同一行继续 */
						white-space: nowrap;
						/* 第三步：用省略号来代表未显示完的文本 */
						text-overflow: ellipsis;
					}
				}
	
				.right {
					padding-top: 10rpx;
					font-size: 26rpx;
					color: #4095e5;
				}
			}
		}
	
		.guanzhu {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
	
		}
	
		.guanzhu .btn {
			border-radius: 30rpx;
			font-size: 26rpx;
	
			color: #fff;
			padding: 12rpx 26rpx;
		}
	}
	
	.detailed {
		// padding: 10rpx 30rpx;
		margin: 10rpx 30rpx;
		text-align: justify;
		word-break: break-all;
		.detailed-top {
			background: #dd275d;
			color: #fff;
			padding: 4rpx 10rpx 4rpx 10rpx;
			border-radius: 10rpx;
	
	
		}
	
		.detailed-text {
			vertical-align: bottom;
			line-height: 54rpx;
			font-size: 32rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
	
		}
	
	}
	
	.circleshop {
		margin: 30rpx 20rpx;
		display: flex;
		background: #F6F6F6;
		padding: 0 20rpx;
		border-radius: 10rpx;
	
		.circleshop-img {
			padding: 20rpx 20rpx;
			border-radius: 10rpx;
	
			.circleshop-img-im {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
		}
	
		.circleshop-text {
			padding: 20rpx 0 0 0rpx;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.circleshop-mor {
			color: #fff;
			background-color: #4095e5;
			padding: 6rpx 20rpx;
			margin-left: 26rpx;
			border-radius: 10rpx;
		}
	}
	
	.circleTime {
		display: flex;
		justify-content: space-between;
		// padding: 10 14rpx;
		margin: 0 14rpx;
		background: #fff;
		padding-top: 20rpx;
		margin: 0 30rpx;
	
		.circleTime-right {
			color: #a1a1a1;
			display: flex;
			align-items: center;
		}
	
		.circleTime-left {
			color: #a1a1a1;
			display: flex;
	
		}
	}
	
	.myInfo {
		// 这里设置高度，上拉显示菜单栏---正式环境删除
		padding-bottom: 60rpx;
	}
	
	.headBox {
		// padding-top: 128rpx;
		overflow: hidden;
		position: relative;
	
		.headBoxBg {
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
	
			// background: url(../../static/circle/video.png) no-repeat;
			border-radius: 100% / 0 0 5% 5%;
			left: 0;
			top: 0;
			right: 0;
		}
	
	
	
		.circledet {
			background: #fff;
			position: relative;
			z-index: 1;
			padding: 0 24rpx;
			// margin-top: 180rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			padding-bottom: 15rpx;
			display: flex;
	
			.card {
	
				// background-image: linear-gradient(to right, #807F7F, #000000);
	
	
	
				.cardFlex {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					width: 100%;
					height: 100%;
				}
	
				.aflex {
					display: flex;
				}
	
				.left {
					display: flex;
					flex-direction: column;
					align-items: center;
	
					.tips {
						color: #E7CD99;
						margin-left: 20rpx;
					}
	
				}
	
				.right {}
			}
	
			.circledet-img {
				padding: 40rpx;
			}
		}
	}
	
	.main {
		padding: 0 24rpx;
	}
	
	
	
	.title {
		font-size: 30rpx;
		color: #333;
	}
	
	.circleshop-text {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	
		.top {
			display: flex;
			justify-content: space-between;
			padding-bottom: 10px;
			font-size: 30rpx;
		}
	
	}
	
	::v-deep .u-album__row__wrapper {
	
		image {
			border-radius: 8rpx;
			width: 220rpx;
			height: 220rpx;
		}
	}
	
	::v-deep .u-album__row {
	
		margin: 0 30rpx;
	}
	
	
	::v-deep .itemBox:last-child {
		padding-bottom: 120rpx !important;
		margin-bottom: 120rpx !important;
	}
	
	.circlebiji-biao img {
		width: 100%;
		height: 100%;
	}
	
	video {
		width: 100%;
	}
</style>